<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/src/css/index.css">
</head>

<body>

  <div class="tab J_tab"></div>

  <script type="text/html" id="J_navItemTpl">
    <div class="{{navStyleClass}}">{{navItemTitle}}</div>
  </script>
  <script type="text/html" id="J_pageItemTpl">
    <div>
      <h1>{{cityName}}</h1>
      <div>
        <img src="{{img}}" alt="{{cityName}}" />
      </div>
      <p>{{intro}}</p>
    </div>
  </script>

  <div id="J_cityData" style="display: none;">
    [
    {
    "id":1,
    "city_name":"北京",
    "intro":"北京市，简称京，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心。截至2018年，全市下辖16个区，总面积16410.54平方千米，2019年末，常住人口2153.6万人，城镇人口1865万人，城镇化率86.6%，常住外来人口达794.3万人。北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，中心位置东经116°20′、北纬39°56′，是世界著名古都和现代化国际城市，也是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会常务委员会的办公所在地。",
    "img":"https://gitee.com/kevinleeeee/blog-hexo-image-bed/raw/master/img//image-20210313032741656.png"
    },
    {
    "id":2,
    "city_name":"上海",
    "intro":"上海，简称沪或申是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心。截至2019年，全市下辖16个区，总面积6340.5平方千米，建成区面积1237.85平方千米，常住人口2428.14万人，城镇人口2139.19万人，城镇化率88.10%。上海地处中国东部、长江入海口、东临东中国海，北、西与江苏、浙江两省相接，是国家物流枢纽，界于东经120°52′-122°12′，北纬30°40′-31°53′之间。战国时，上海是春申君的封邑，故别称申。晋朝时，因渔民创造捕鱼工具“扈”，江流入海处称“渎”，因此松江下游一带称为“扈渎”，后又改“沪”，故上海简称“沪”。2020年，上海市地区生产总值38700.58亿元，按可比价格计算，比上年增长1.7%2019年12月15日，荣登中国社会科学院年度中国城市品牌前10强。",
    "img":"https://gitee.com/kevinleeeee/blog-hexo-image-bed/raw/master/img//image-20210313004814825.png"
    },
    {
    "id":3,
    "city_name":"广州",
    "intro":"广州，简称穗别称羊城、花城，是广东省省会、副省级市、国家中心城市、超大城市、广州都市圈核心城市，国务院批复确定的中国重要的中心城市、国际商贸中心和综合交通枢纽。截至2019年，全市下辖11个区，总面积7434平方千米，建成区面积1249.11平方千米，常住人口1530.59万人，城镇人口1323.35万人，城镇化率86.46%。广州地处中国南部、珠江下游、濒临南海，是中国南部战区司令部驻地，国家物流枢纽，国家综合性门户城市，首批沿海开放城市，是中国通往世界的南大门，粤港澳大湾区、泛珠江三角洲经济区的中心城市以及一带一路的枢纽城市。广州是首批国家历史文化名城，广府文化的发祥地，从秦朝开始一直是郡治、州治、府治的所在地，华南地区的政治、军事、经济、文化和科教中心。从公元三世纪起成为海上丝绸之路的主港，唐宋时成为中国第一大港，是世界著名的东方港市，明清时是中国唯一的对外贸易大港，也是世界唯一两千多年长盛不衰的大港。",
    "img":"https://gitee.com/kevinleeeee/blog-hexo-image-bed/raw/master/img//image-20210313032857308.png"
    }
    ]
  </div>

  <script src="../src/utils/tools.js"></script>
  <script src="./js/index.js"></script>
  <script type="text/javascript">
    var tab = new Tab({
      el: '.J_tab',
      classObject: {
        navItem: {
          origin: 'nav-item',
          current: 'nav-item current'
        },
        pageItem: {
          origin: 'page-item',
          current: 'page-item current'
        }
      }
    }).init();
  </script>
</body>

</html>